<template>
	<view class="cateList" v-if="cateObj && cateObj.category">
		<!-- 轮播图 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in cateObj.category.bannerUrlList" :key="index">
				<view class="swiper-item">
					<image :src="item" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="title">{{cateObj.category.frontName}}</view>
		<view class="desc">{{cateObj.category.frontDesc}}</view>
		
		<!-- 商品列表 -->
		<view class="goodsList" v-if="cateObj.itemList">
			<view class="goodsItem" v-for="item in cateObj.itemList" :key="item.id" @click="toDetail(item)">
				<image :src="item.listPicUrl" mode=""></image>
				<view class="goodsDesc">
					{{item.name}}
				</view>
				<view class="goodsPrice">
					{{item.retailPrice}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { computed } from 'vue';
import { mapActions,mapState } from 'vuex'

	export default {
		name:"CateList",
		props:['L1Id']
		,
		data() {
			return {
				
			};
		},
		mounted(){
			this.getCateData();
		},
		methods:{
			...mapActions('cateList',['getCateDataListActions']),
			//获取数据
			async getCateData(){
				this.getCateDataListActions();
			},
			//跳转至详情页面
			toDetail(goodsItem){
				wx.navigateTo({
					url:'/pages/detail/detail?goodsItem='+JSON.stringify(goodsItem),
					
				})
			}
			
		},
		computed:{
			...mapState('cateList',['cateDataList']),
			cateObj(){
				 return this.cateDataList.find(item => item.category?.parentId === this.L1Id) || {}
			}
		}
	}
</script>

<style lang="stylus">
	.cateList
		.swiper
			height: 360rpx
			image
				width: 100%
				height: 360rpx
		.title
			font-size: 40rpx
			line-height: 80rpx
			color: #333
			text-align: center
		.desc
			font-size: 30rpx
			line-height: 40rpx
			color: #666
			text-align: center
		.goodsList
			display: flex
			flex-wrap: wrap
			justify-content: space-around
			&::after
				content: ""
				width: 344rpx
			.goodsItem
				width: 344rpx
				height: 480rpx
				image
					width: 344rpx
					height: 344rpx
				.goodsPrice
					color: red
					font-size: 36rpx
</style>